/**
 * 扩展组件功能写法，方法调用文件，用法就是调用方法一样
 * 1,导入需要扩展的组件
 * 2，extend：扩展方法
 * 3，分析扩展哪些东西,固定定位
 * 4，自动关闭功能,控制显示隐藏
 * 5,继承方法需要在页面里面声明
 * 6，实现消失后，比他上面的位置往下调
 * 7，z这个就扩展的文件
 */
import Notification from './notification'
export default {
  extends: Notification,
  computed: {
    style() {
      return {
        position: 'fixed',
        right: '20px',
        bottom: `${this.verticalOffset}px`
      }
    }
  },
  mounted() {
    this.createTimer()
  },
  methods: {
    createTimer() {
      if (this.autoClose) {
        this.timer = setTimeout(() => {
          this.visible = false
        }, this.autoClose)
      }
    },
    // 销毁倒计时
    clearTime() {
      if (this.timer) {
        clearTimeout(this.timer)
      }
    },
    afterEnter() {
      // 在弹出之后拿当前的高度
      this.height = this.$el.offsetHeight
    }
  },
  // 销毁前的钩子
  beforeDestroy() {
    this.clearTime()
  },
  data() {
    return {
      verticalOffset: 0,
      autoClose: 3000,
      height: 0,
      visible: false,
      timer: null
    }
  }
}
